<template>
  <div class="demo-split">
    <Split v-model="split1">
      <div slot="left" class="demo-split-pane">
        <Tree :data="data1" @contextmenu.native="showContextMenu"></Tree>
      </div>
      <div slot="right" class="demo-split-pane2">
        <ApiDetail></ApiDetail>
      </div>
    </Split>
    <Dropdown
      trigger="contextMenu"
      style="margin-left:20px"
      placement="right-start"
      @on-click="handleChoose"
      ref="contextMenu"
    >
      <DropdownMenu slot="list">
        <DropdownItem name="addNode">添加下级接口</DropdownItem>
        <DropdownItem name="editNode">修改接口</DropdownItem>
        <DropdownItem name="deleteNode">删除接口</DropdownItem>
      </DropdownMenu>
    </Dropdown>

    <Drawer title="添加下级接口" v-model="value1" width="720">
      <Form :model="formData">
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="接口名称" label-position="top">
              <Input v-model="formData.name" placeholder="please enter user name"/>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="接口链接" label-position="top">
              <Input v-model="formData.url" placeholder="please enter url">
                <span slot="prepend">http://hostname/</span>
              </Input>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="是否需要身份认证" label-position="top">
       
              <RadioGroup v-model="formData.owner" style="width:100%;margin-left:20px">
                <Radio label="是"></Radio>
                <Radio label="否"></Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="请添加过滤器" label-position="top">
              <Select v-model="formData.type" placeholder="please choose the type">
                <Option value="private">Private</Option>
                <Option value="public">Public</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row :gutter="32">
          <Col span="12">
            <FormItem label="是否生成代码" label-position="top">
              <RadioGroup v-model="formData.approver" style="width:100%;margin-left:20px">
                <Radio label="是"></Radio>
                <Radio label="否"></Radio>
              </RadioGroup>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="请选择代码生成器" label-position="top">
              <Select
                v-model="formData.desc"
                multiple
                disabled
                placeholder="please choose the type"
              >
                <Option value="private">Vue代码生成器</Option>
                <Option value="public">Java代码生成器</Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
         <FormItem label="接口描述" label-position="top">
          <Input type="textarea" v-model="formData.desc" :rows="4" placeholder="TODO"/>
        </FormItem>
        <FormItem label="返回示例" label-position="top">
          <Input type="textarea" v-model="formData.desc" :rows="4" placeholder="TODO"/>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="value3 = false">Cancel</Button>
        <Button type="primary" @click="value3 = false">Submit</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import ApiDetail from "@/views/api/ApiDetail";

export default {
  data() {
    return {
      value1: false,
      split1: 0.18,
      formData: {
        name: "",
        url: "",
        owner: "是",
        type: "",
        approver: "否",
        date: "",
        desc: ""
      },
      data1: [
        {
          title: "Root",
          expand: true,
          children: [
            {
              title: "employee",
              expand: true,
              children: [
                {
                  title: "{:id}",
                  selected: true
                },
                {
                  title: "list"
                },
                {
                  title: "info"
                },
                {
                  title: "add"
                }
              ]
            },
            {
              title: "menu",
              children: [
                {
                  title: "{:id}"
                },
                {
                  title: "page"
                }
              ]
            }
          ]
        }
      ]
    };
  },
  components: {
    ApiDetail
  },
  methods: {
    showContextMenu: function(e) {
      e.preventDefault();
      let dom = document.getElementsByClassName("ivu-select-dropdown");
      dom[0].style.top =
        e.clientY + 125 > window.innerHeight
          ? `${window.innerHeight - 127}px`
          : `${e.clientY}px`;
      dom[0].style.left = `${e.clientX + 20}px`;
      this.$refs.contextMenu.$refs.reference = e.target;
      this.$refs.contextMenu.currentVisible = true;
    },
    handleChoose: function(i) {
      eval(`this.${i}()`);
    },
    addNode: function() {
      this.value1 = true;
    }
  }
};
</script>

<style>
.demo-split {
  height: 100%;
  border: 1px solid #dcdee2;
}
.demo-split-pane {
  padding: 10px;
  display: flex;
  flex-flow: column;
  height: 100%;
}

.demo-split-pane2 {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.api-info {
  margin-left: 20px;
  margin-top: 5px;
}
</style>
